body.dark {
  .dh_box {
    background-color: $dhBg-dark;
  }
  #app .sidebar-container {
    background-color: $menuBg-dark;
    .el-menu[role="menubar"] {
      background-color: $menuBg-dark;
      .el-submenu__title {
        color: $menuText-dark;
        i.iconfont {
          color: $menuIColor-dark;
        }
        .svg-icon {
          color: $menuIColor-dark;
        }
        &:hover {
          background-color: $subMenuActiveBg-dark;
          i,
          span, .svg-icon {
            color: $menuActiveText-dark;
          }
        }
      }
      .el-submenu {
        // &.is-opened {
        //   // background-color: $subMenuBg-dark;
        //   & > .el-submenu__title {
        //     background-color: $subMenuActiveBg-dark;
        //     i,
        //     span {
        //       color: $menuActiveText-dark;
        //     }
        //   }
        // }
        & > .el-menu {
          & > .subMenu_div_wrap.nest-menu {
            & > .menu_link {
              & > .el-menu-item {
                background-color: $subMenuBg-dark;
                color: $subMenuText-dark;
                &.is-active {
                  & > .menu_item_div {
                    background-color: $subMenuItemActiveBg-dark;
                    color: $subMenuActiveText-dark;
                  }
                }
                &:hover {
                  & > .menu_item_div {
                    background-color: $subMenuItemActiveBg-dark;
                    color: $subMenuActiveText-dark;
                  }
                }
              }
            }
          }
          &::before {
            background-color: $subMenuOpenedBefore-dark;
          }
          background-color: $subMenuBg-dark;
        }
        &.is-active {
          & > .el-submenu__title {
            background-color: $subMenuActiveBg-dark;
            &::before {
              background-color: $subMenuTitleBefore-dark;
            }
            i,
            span, .svg-icon {
              color: $menuActiveText-dark;
            }
          }
        }
      }
    }
  }
  .el-menu--vertical {
    .el-menu {
      width: 180px;
      background-color: $menuBg-dark;
    }
    & .el-menu-item {
      background-color: $menuBg-dark;
      color: $subMenuText-dark;
      &.is-active {
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg-dark;
          color: $menuActiveText-dark;
        }
      }
      & > .menu_item_div {
        color: $menuText-dark;
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg-dark;
          color: $menuActiveText-dark;
        }
      }
      &:hover {
        background-color: $menuBg-dark;
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg-dark;
          color: $menuActiveText-dark;
        }
      }
    }
  }
}
